<template>
  <transition>
    <div class="admin-report-add">
      <div class="module">
        <span class="module-title">填写服务内容 <span class="iconfont action-add-img icon-xiangjizhuanhuan" @click="handleOpenPopupImg"></span></span>
        <textarea v-model="form.remark" class="item-textarea" placeholder="输入或粘贴服务信息" oninput="this.style.height=this.scrollHeight + 'px'"></textarea>

        <!--图片缩略图展示-->
        <ul class="img-upload-content" v-if="files.length>0">
          <li class="item" v-for="(item,index) in files">
            <img class="img" :src="item.src"/>
          </li>
        </ul>
        <!--图片缩略图展示-->
      </div>
      <div class="module module-add">
        <span class="module-title">填写工单来源</span>
        <mt-radio
          title=""
          v-model="selectType"
          :options="optionsCustomer">
        </mt-radio>
        <div class="module-body">
          <mt-cell v-if="isHasChirld" title="客户名称" :value="allotStore" is-link @click.native="handleSelectApply('allotFirst')"></mt-cell>
          <mt-field v-if="hasSelectType" class="client-comment" label="客户说明" placeholder="请输入客户说明" v-model="form.applyCustomDesc"></mt-field>
        </div>
      </div>
      <div class="button-content">
        <mt-button type="danger" @click="handleNoSend">保存工单</mt-button>
        <mt-button type="primary" @click="handleform">立即派工</mt-button>
      </div>

      <!--弹窗-选择客户名称-->
      <mt-popup
        v-model="popupShow"
        position="bottom" class="me-popup">
        <mt-picker :slots="slots" @change="onValuesChange" class="picker-bottom picker-show-50"></mt-picker>
        <mt-picker v-if="slots!==applysSlots" :slots="slotsSecond" @change="onValuesChangeSecond" class="picker-bottom picker-show-50"></mt-picker>
        <div class="button-content">
          <mt-button type="danger" @click="popupShow=false">确认</mt-button>
        </div>
      </mt-popup>
      <!--弹窗-选择客户名称-->

      <!--弹窗-暂不派工原因-->
      <mt-popup
        v-model="noSendPopup"
        position="bottom" class="no-send-popup">
        <div class="popup-content">
          <mt-radio
            title="暂不派工原因"
            v-model="form.secondAllotReasonType"
            :options="optionsNoSend">
          </mt-radio>
          <mt-field label="备 注" placeholder="请输入备注" v-model="form.secondAllotReason"></mt-field>

        </div>
        <div class="button-content">
          <mt-button type="danger" @click="noSendPopup = false">取 消</mt-button>
          <mt-button type="primary" @click="handleformSave">确认</mt-button>
        </div>
      </mt-popup>
      <!--弹窗-暂不派工原因-->

      <!--弹窗-选择委托门店-->
      <mt-popup
        v-model="applyStorePopup"
        position="bottom" class="apply-store-popup">
        <div class="module">
          <span class="module-title">选择派工对象</span>
          <div class="module-body">
            <mt-cell title="派工门店" :value="applyStore" is-link @click.native="handleSelectApply('apply')"></mt-cell>
            <dl class="people-list" v-if="showPeople">
              <!--<dt class="item-header">请选择派工对象</dt>-->
              <dd class="people-item" v-if="optionsPeopleNameZ.length>0">
                <div class="item-title">管理员
                </div>
                <mt-checklist
                  class="select-people-name"
                  title=""
                  v-model="selectPeopleNameZ"
                  :options="optionsPeopleNameZ">
                </mt-checklist>
              </dd>
              <!--<dd class="people-item" v-if="optionsPeopleNameF.length>0">-->
              <!--<div class="item-title">-->
              <!--员工-->
              <!--</div>-->
              <!--<mt-checklist-->
              <!--class="select-people-name"-->
              <!--title=""-->
              <!--v-model="selectPeopleNameF"-->
              <!--:options="optionsPeopleNameF">-->
              <!--</mt-checklist>-->
              <!--</dd>-->
            </dl>
          </div>
        </div>
        <div class="button-content">
          <mt-button type="danger" @click="applyStorePopup = false">取 消</mt-button>
          <mt-button type="primary" @click="handleSureOffer">确认派工</mt-button>
        </div>
      </mt-popup>
      <!--弹窗-选择委托门店-->
      <!--弹窗-上传车辆照片-->
      <mt-popup
        v-model="popupCarImg"
        position="right"
        class="popup-car-img">
        <upload-img @uploadsData="getUploads" @filesData="getFiles" @popupClose="handleClose"></upload-img>
        <!--<div class="button-content">-->
        <!--<div class="img-note">*建议提供车架号、整车图、破损部位等图片。</div>-->
        <!--<mt-button type="danger" @click="handleConfirmCar">确认</mt-button>-->
        <!--</div>-->
      </mt-popup>

      <!--弹窗-上传车辆照片-->
      <div class="add-tips-list" ref="addlist">
        <ul>
          <li v-for="(item,index) in listDemand" class="add-tips-item">
            {{index+1}}，“{{item.historys[item.historys.length-1].operatorName}}”于
            <span class="text-red">{{item.historys[item.historys.length-1].createDateStr}}</span>新增<span class="text-red">{{item.remark}}</span>的报单；
          </li>
        </ul>
      </div>
    </div>
  </transition>
</template>

<script>
  import {Button,Field,Popup,Toast,Radio,Picker,MessageBox,Search} from 'mint-ui';

  import uploadImg from '../common/upload-img';
  export default {
    components:{
      uploadImg
    },
    data () {
      return {
        // 默认数据
        isRepeatClick:false,
        goStateId:'',
        value: '',
        optionsNoSend:[
          {
            label: '等待统一调度',
            value: '0',
          },
          {
            label: '客户原因取消',
            value: '1'
          },
        ],
        optionsCustomer:[],
        popupCarImg:false,
//        选择派工人员
        showPeople:false,
        storeAllMen:[],
        selectPeopleNameZ:[],
        selectPeopleNameF:[],
        optionsPeopleNameZ:[],
        optionsPeopleNameF:[],
        noSendPopup:false,
//        弹窗选择
        applyStorePopup:false,
        selectType:'',
        applyStore:'请选择派工门店',
        applyPeopleName:'请选择派工对象',
        allotStore:'请选择客户名称',
        slots:[],
        applyCustomTypeId1:'',
        applyCustomTypeId2:'',
        applyCustomTypeId3:'',
        slotsSecond:[
          {
            flex: 1,
            values: [],
            name: [],
            id: [],
            className: 'slot1',
            textAlign: 'center'
          }
        ],
        applysSlots: [
          {
            flex: 1,
            values: [],
            className: 'slot1',
            textAlign: 'center'
          }
        ],
        searchList:[
          {
            name:'集群车宝',
            id:1
          },{
            name:'二汽',
            id:2
          },{
            name:'三汽',
            id:3
          },
        ],
        allotsSlots: [
          {
            flex: 1,
            values: [],
            id: [],
            name: [],
            className: 'slot1',
            textAlign: 'center'
          },
        ],
        dealStoreList:[],
        popupShow:false,
        isHasChirld:false,
        hasSelectType:false,
        listDemand:[],
        applyCustomNameFirst:'',
        applyCustomNameShortFirst:'',
        isSelectCusmer:false,
        files:[],
//        上传数据集合
        form:{
          id:'',
          allotShopName:'',
          secondAllotReasonType:'',
          secondAllotReason:'',
          demandSource:'',
          demandType:1,
          entryFinish:0,
          remark:'',
          applyShopName:'',
          applyCustomName:'',
          applyCustomShortName:'',
          applyCustomDesc:'',
          applyCustomTypeId:'',
          parts:[],
          uploads:[],
          checkoptions:[
            {
              id:1,
              label: '前挡',
              partLocate: 'F',
              isCheck:false,
            },
            {
              id:2,
              label: '后挡',
              partLocate: 'B',
              isCheck:false,
            },
            {
              id:3,
              label: '天窗',
              partLocate: 'T',
              isCheck:false,
            },
            {
              id:4,
              label: '侧窗',
              isCheck:false,
              side:[{
                label: '左侧',
                partLocate:'L',
                number:''
              },{
                label: '右侧',
                partLocate:'R',
                number:''
              }],
            }]
        }
      }
    },
    mounted(){
      this.getStoreData();
      this.getData();

      /**获取客户列表**/
      var params = new URLSearchParams();
      this.$axios({
        method: 'post',
        url:'gp/applyCustomType/getApplyCustomList',
        data:params
      }).then((res)=>{
        for(var i=0;i<res.data.object.length;i++){
        const item={
          label:res.data.object[i].applyCustomShortName,
          value:res.data.object[i].id.toString(),
        }
        this.optionsCustomer.push(item)
      }
      const lastItem={
        label: '第三方',
        value: '第三方',
        disabled: true
      }
      this.optionsCustomer.push(lastItem)
    })
    },
    beforeRouteLeave (to, from , next) {
      if(this.goStateId!==''){
        from.query.stateId=this.goStateId;
      }
      next();
    },
    computed: {
      /**联想搜索计算**/
      data(){
        return this.searchList.filter((d) => {
            let is_del = false;
        if (!is_del) {
          if (d.name.indexOf(this.form.applyShopName) > -1
          ) {
            return d;
          }
        }
      })
      }
    },
    watch:{

      /**选择客户类型事件**/
      'selectType'(val){
        this.hasSelectType=true;
        this.form.applyCustomName='';
        this.form.applyCustomShortName='';
        this.applyCustomNameFirst='';
        this.applyCustomNameShortFirst='';
        this.form.applyCustomDesc='';
        var thisLabel='';
        for(var i=0;i<this.optionsCustomer.length;i++){
          if(this.optionsCustomer[i].value==val){
            thisLabel=this.optionsCustomer[i].label
          }
        }
        if(thisLabel=='保险公司'){
          this.allotStore='请选择客户名称';
          this.form.demandSource=3;
          this.form.applyCustomTypeName=thisLabel;

        }else if(thisLabel=='合约客户'){
          this.allotStore='请选择客户名称';
          this.form.demandSource=4;
          this.form.applyCustomTypeName=thisLabel;
        }else if(thisLabel=='散户'){
          this.allotStore='请选择客户名称';
          this.form.demandSource=5;
          this.form.applyCustomTypeName=thisLabel;
        }
        this.allotsSlots[0].values=[];
        this.allotsSlots[0].id=[];
        this.allotsSlots[0].name=[];

        this.applyCustomTypeId1=val;
        this.form.applyCustomTypeId=val;
        /**获取下级客户**/
        var params = new URLSearchParams();
        params.append('id',val);
        this.$axios({
          method: 'post',
          url:'gp/applyCustomType/getApplyCustomList',
          data:params
        }).then((res)=>{
          console.log(res,1)
        if(res.data.object.length>0){
          this.isHasChirld=true;
        }else{
          this.isHasChirld=false;
        }
        for(var i=0;i<res.data.object.length;i++){
          this.allotsSlots[0].values.push(res.data.object[i].applyCustomShortName)
          this.allotsSlots[0].id.push(res.data.object[i].id)
          this.allotsSlots[0].name.push(res.data.object[i].applyCustomTypeName)
        }

      })
      },
      /**选择派工管理员事件**/
      'selectPeopleNameZ'(val){
        this.form.allotsSave=[];
        const sendSelect = val;
        for(var i=0;i<sendSelect.length;i++){
          for(var j=0;j<this.storeAllMen.length;j++){
            if(sendSelect[i]==this.storeAllMen[j].id){
              const item={
                allotShopId:this.form.allotShopId,
                allotMemberId:sendSelect[i],
                allotOpenId:this.storeAllMen[j].userId,
                allotMemberName:this.storeAllMen[j].name,
                memberType:this.storeAllMen[j].shopKeeper,

              }
              this.form.allotsSave.push(item)
            }
          }
        }
      },
    },
    methods:{
      /** 获取报单列表 **/
      getData() {
        /** 获取接单列表 **/
        var params = new URLSearchParams();
        params.append('pageSize',20);
        this.$axios({
          method: 'post',
          url:'gp/declaration/listDemand',
          data:params
        }).then((res)=>{
          for(var i=0;i<res.data.object.demands.length;i++){
          if(res.data.object.demands[i].demandSource!=='1'){
            this.listDemand.push(res.data.object.demands[i]);
            console.log(this.listDemand)
            if(this.listDemand.length>2){
              return true;
            }
          }
        }
      });
      },

      /** 获取门店列表 **/
      getStoreData() {
        var params = new URLSearchParams();
        params.append('page',1);
        params.append('pageRow',1000);
        this.$axios({
          method: 'post',
          url:'gp/dataStatics/getStoreList',
          data:params
        }).then((res)=>{
          console.log(res,111)
        this.dealStoreList = res.data.object.rows;
        for(var i=0;i<res.data.object.rows.length;i++){
          if(res.data.object.rows[i].storeType==1){
            this.applysSlots[0].values.push(res.data.object.rows[i].storeName);
          }
        }
      })
      },

      /**暂不派工弹窗**/
      handleNoSend(){
        if(this.form.remark==''){
          Toast({
            message: '请填写服务信息',
            position: 'middle',
            duration:1000
          });
          return false;
        }
        if(this.form.demandSource==''){
          Toast({
            message: '请选择服务来源',
            position: 'middle',
            duration:1000
          });
          return false;
        }
        this.form.allotShopName='';
        this.form.allotShopId='';
        this.optionsPeopleNameZ=[];
        this.selectPeopleNameZ=[];
        this.optionsPeopleNameF=[];
        this.selectPeopleNameF=[];
        this.noSendPopup=true;
      },

      /**确认暂不派工**/
      handleformSave(){
        if(this.form.secondAllotReasonType==''){
          Toast({
            message: '请选择暂不派工的原因',
            position: 'middle',
            duration:1000
          });
          return false;
        }
        if(this.form.secondAllotReasonType=='1' && this.form.secondAllotReason==''){
          Toast({
            message: '请输入备注',
            position: 'middle',
            duration:1000
          });
          return false;
        }

        if(this.isRepeatClick==false) {
          this.isRepeatClick = true;
          var params = new URLSearchParams();
          params.append('demandSource',this.form.demandSource);
          params.append('demandId',this.form.id);
          if(this.form.secondAllotReasonType=='1'){
            params.append('forceCancel',1);
          }
          params.append('demandData',JSON.stringify(this.form));

          this.$axios({
            method: 'post',
            url:'gp/declaration/sendDemand',
            data:params
          }).then((res)=>{
            this.isRepeatClick = false;
          if(res.data.statusCode==200){
            Toast({
              message: '保存工单成功，请立即建档',
              position: 'middle',
              duration:800
            });

            if(this.form.secondAllotReasonType=='1'){
              this.goStateId='6';
            }else{
              this.goStateId='0';
            }
            setTimeout(()=>{
            this.$router.push({path:'/platform-report-list'})
          },800)
          }else{
            Toast({
              message: res.data.message,
              position: 'middle',
              duration:800
            });
          }
        }).catch((error)=> {
            Toast({
              message: '系统错误，请勿重复点击',
              position: 'middle',
              duration:800
            });
          this.isRepeatClick=false
        });
        }else{
          Toast({
            message: '等待响应，请勿重复点击',
            position: 'middle',
            duration:800
          });
        }

      },

      /**立即派工弹窗**/
      handleform(){
        if(this.form.remark==''){
          Toast({
            message: '请填写服务信息',
            position: 'middle',
            duration:1000
          });
          return false;
        }
        if(this.form.demandSource==''){
          Toast({
            message: '请选择服务来源',
            position: 'middle',
            duration:1000
          });
          return false;
        }
        this.applyStorePopup=true;
      },
      /** 确认派单 **/
      handleSureOffer(){
        if(typeof this.form.allotShopId=='undefined'){
          Toast({
            message: '请选择派工门店',
            position: 'middle',
            duration:1000
          });
          return false;
        }
        if(this.optionsPeopleNameZ.length<=0){
          Toast({
            message: '该门店没有用户，请重新选择派工门店',
            position: 'middle',
            duration:1000
          });
          return false;
        }
        if(this.selectPeopleNameZ.length<=0){
          Toast({
            message: '请选择门店管理员',
            position: 'middle',
            duration:1000
          });
          return false;
        }
        if(this.isRepeatClick==false){
          this.isRepeatClick=true;
          var params = new URLSearchParams();
          params.append('demandSource',this.form.demandSource);
          params.append('demandId',this.form.id);
//        params.append('allotType', 0);
          params.append('hasAllotFlag',1);
          params.append('demandData',JSON.stringify(this.form));
          this.$axios({
            method: 'post',
            url:'gp/declaration/sendDemand',
            data:params
          }).then((res)=>{

            this.isRepeatClick=false
          if(res.data.statusCode==200){
            Toast({
              message: '新增派单成功',
              position: 'middle',
              duration:800
            });
            setTimeout(()=>{
              this.applyStorePopup = false;
            this.goStateId='1';
            this.$router.push({path:'/platform-report-list'})
          },800)
          }else{
            Toast({
              message: res.data.message,
              position: 'middle',
              duration:800
            });
          }
        }).catch((error)=> {
            Toast({
              message: '系统错误，请勿重复点击',
              position: 'middle',
              duration:800
            });
          this.isRepeatClick=false
        });
        }else{
          Toast({
            message: '等待响应，请勿重复点击',
            position: 'middle',
            duration:800
          });
        }

      },
      handleOpenPopupImg(){
        this.popupCarImg=true;
      },
      /**滑动选择客户事件**/
      onValuesChange(picker, values) {
        if(this.popupShow==true){
          if(this.slots==this.applysSlots){
            this.applyStore=values[0];
            this.form.allotShopName=values[0];
            let obj = {};
            obj = this.dealStoreList.find((item)=>{
                return item.storeName === values[0];
          });
            this.$set(this.form, 'allotShopId', obj.id);
            this.optionsPeopleNameZ=[];
            this.selectPeopleNameZ=[];
            this.optionsPeopleNameF=[];
            this.selectPeopleNameF=[];
            var params = new URLSearchParams();
            params.append('storeId', this.form.allotShopId);
            params.append('currentPage','1');
            params.append('pageRow','100');
            this.$axios({
              method: 'post',
              url:'gp/declaration/getStoreMember',
              data:params
            }).then((res)=>{
              console.log(res)
            if(res.data.statusCode=200){
              this.showPeople=true;
              this.storeAllMen=res.data.object;
              for(var i=0;i<res.data.object.length;i++){
                const item={
                  label:res.data.object[i].name,
                  value:res.data.object[i].id,
                }
                if(res.data.object[i].shopKeeper==1){
                  this.optionsPeopleNameZ.push(item)
                  this.selectPeopleNameZ.push(item.value)
                }else{
                  this.optionsPeopleNameF.push(item)
//                    this.selectPeopleNameF.push(item.value)
                }
              }

            }else{
              console.log(res.data.message)
            }
          })

          }else if(this.slots==this.allotsSlots){

            this.allotStore=values[0];
            this.form.applyShopName=values[0];
            this.applyCustomNameFirst=values[0]
            this.slotsSecond[0].values=[];
            this.slotsSecond[0].id=[];
            this.slotsSecond[0].name=[];
            for(var i=0;i<picker.slots[0].values.length;i++){
              if(picker.slots[0].values[i]==values[0]){
                this.form.applyCustomShortName=picker.slots[0].name[i];
                this.applyCustomNameShortFirst=picker.slots[0].name[i];

                this.applyCustomTypeId2=picker.slots[0].id[i];
                this.form.applyCustomTypeId=this.applyCustomTypeId1+','+this.applyCustomTypeId2;
                var params = new URLSearchParams();
                params.append('id',picker.slots[0].id[i]);
                this.$axios({
                  method: 'post',
                  url:'gp/applyCustomType/getApplyCustomList',
                  data:params
                }).then((res)=>{
                  if(res.data.object.length<=0){
                  this.form.applyCustomName=this.applyCustomNameFirst

                }
                for(var i=0;i<res.data.object.length;i++){
                  this.slotsSecond[0].name.push(res.data.object[i].applyCustomTypeName)
                  this.slotsSecond[0].values.push(res.data.object[i].applyCustomShortName)
                  this.slotsSecond[0].id.push(res.data.object[i].id)
                }
              })
              }
            }

          }
        }
      },
      onValuesChangeSecond(picker, values){

        if(values[0]==undefined){
          this.form.applyCustomName=this.applyCustomNameFirst
          this.form.applyCustomShortName=this.applyCustomNameShortFirst
          this.allotStore=this.form.applyCustomName;
        }else{
          this.form.applyCustomName=this.applyCustomNameFirst+'-'+values[0]
          this.allotStore=this.form.applyCustomName;
          for(var i=0;i<picker.slots[0].values.length;i++){
            if(picker.slots[0].values[i]==values[0]){
              this.form.applyCustomShortName=this.applyCustomNameShortFirst+'-'+picker.slots[0].name[i]
            }
          }
        }
      },
      /**滑动插件弹窗**/
      handleSelectApply(val){
        if(val=='apply'){
          this.slots=this.applysSlots;
          if(this.isSelectCusmer==false){
            this.applyStore=this.slots[0].values[0];
            this.form.allotShopName=this.slots[0].values[0];
            let obj = {};
            obj = this.dealStoreList.find((item)=>{
                return item.storeName === this.slots[0].values[0];
          });
            this.$set(this.form, 'allotShopId', obj.id);

            var params = new URLSearchParams();
            params.append('storeId', this.form.allotShopId);
            params.append('currentPage','1');
            params.append('pageRow','100');
            this.$axios({
              method: 'post',
              url:'gp/declaration/getStoreMember',
              data:params
            }).then((res)=>{
              console.log(res)
            if(res.data.statusCode=200){
              this.showPeople=true;
              this.storeAllMen=res.data.object;
              this.optionsPeopleNameZ=[];
              this.selectPeopleNameZ=[];
              this.optionsPeopleNameF=[];
              this.selectPeopleNameF=[];
              for(var i=0;i<res.data.object.length;i++){
                const item={
                  label:res.data.object[i].name,
                  value:res.data.object[i].id,
                }
                if(res.data.object[i].shopKeeper==1){
                  this.optionsPeopleNameZ.push(item)
                  this.selectPeopleNameZ.push(item.value)
                }else{
                  this.optionsPeopleNameF.push(item)
//                this.selectPeopleNameF.push(item.value)
                }
              }

            }else{
              console.log(res.data.message)
            }
          })
          }
        }
        if(val=='allotFirst'){

          this.isSelectCusmer=true;
          this.slots=this.allotsSlots;
          if(this.form.applyCustomName==''){
            this.allotStore=this.slots[0].values[0];
            this.applyCustomNameFirst=this.slots[0].values[0];
            this.form.applyCustomName=this.slots[0].values[0];
            this.form.applyCustomShortName=this.slots[0].name[0];
            this.applyCustomNameShortFirst=this.slots[0].name[0];
            this.slotsSecond[0].values=[];
            this.slotsSecond[0].name=[];
            this.slotsSecond[0].id=[];
            this.applyCustomTypeId2=this.slots[0].id[0];
            this.form.applyCustomTypeId=this.applyCustomTypeId1+','+this.applyCustomTypeId2;
            var params = new URLSearchParams();
            params.append('id',this.slots[0].id[0]);
            this.$axios({
              method: 'post',
              url:'gp/applyCustomType/getApplyCustomList',
              data:params
            }).then((res)=>{
              for(var i=0;i<res.data.object.length;i++){
              this.slotsSecond[0].name.push(res.data.object[i].applyCustomTypeName)
              this.slotsSecond[0].values.push(res.data.object[i].applyCustomShortName)
              this.slotsSecond[0].id.push(res.data.object[i].id)
            }
          })

          }
        }
        this.popupShow=true;
      },
      getUploads(data){

        this.form.uploads=data;
        console.log(data)
      },
      getFiles(data){
        this.files=data;
      },
      handleClose(){

        this.popupCarImg=false;
      }
    }
  }
</script>
<style>
  .client-comment .mint-field-core{
    padding-right: 24px;
    text-align: right;
  }
  .icon-delete:before{
    position: relative;
    top: -4px;
    content:'-';
    font-size: 24px;
  }
  .admin-report-add{
    padding:0 0 24px;
    overflow: hidden;
  }
  .admin-report-add .add-img{
    display: block;
    padding:22px 0 0;
    height: 100px;
    text-align: center;
    color: #888;
  }
  .admin-report-add .add-img:before{
    display: block;
    margin:0 auto 4px;
    font-size:32px;
  }
  .admin-report-add .img-upload-content .icon-shanchu{
    background:rgba(225,225,225,0.5);
    position: absolute;
    top:0;
    right:12px;
    width: 24px;
    height: 24px;
    font-size: 18px;
    color:#fff;
    text-align: center;
    line-height: 28px;
  }
  .admin-report-add .img-upload-content{
    display: flex;
    overflow: auto;
    padding:20px 10px 8px;
    margin:0 -6px;
  }
  .admin-report-add .img-upload-content .item{
    position: relative;
    display: flex;
    flex:1;
    width:27%;
    min-width:27%;
    max-width:27%;
    padding:0 6px;
  }
  .admin-report-add .img-upload-content .item img{
    width:100%;
    height:80px;
  }
  .admin-report-add .popup-car-img{
    width:92% !important;
    height: 100%;
    overflow: auto;
  }
  .admin-report-add .popup-car-img .button-content .mint-button--normal{
    width: 100%;
    margin: 0;
  }
  .admin-report-add .input-upload {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    opacity: 0;
    font-size: 0;
    width: 100%;
  }
  .action-select.mint-button{
    display: inline-block;
    float: right;
    height: 32px;
    font-size: 16px;
  }
  .people-list{
    border-top:1px solid #ddd;
    padding:10px 20px 0 12px;
    margin: 0;
  }
  .people-item{
    margin: 0 0 16px;
    border-bottom:1px solid #ddd;
  }
  .people-item .item-title{
    display: block;
    font-size: 16px;
    line-height: 36px;
  }
  .select-people-name .mint-cell{
    background:none;
    display:inline-block;
    width:32%;
  }
  .select-people-name .mint-cell .mint-cell-wrapper{
    background:none;
    padding: 0;
  }
  .select-people-name .mint-checklist-label{
    padding: 0;
  }
  .add-tips-list{
    height:120px;
    padding:20px 24px 0;
    overflow: auto;
  }
  .add-tips-item{
    padding-bottom: 6px;
    font-size: 15px;
    line-height: 24px;
  }
  .mint-toast{
    z-index:10000
  }
  .platform-report-details .popupResult .mint-cell-title{
    width: 96px !important;
  }

  .no-send-popup .mint-radiolist .mint-cell{
    display:inline-block;
    width: 46%;
  }
  .no-send-popup{
    width: 100%;
  }
  .no-send-popup .mint-cell-title{
    width: 80px !important;
  }
  .no-send-popup .mint-cell:last-child{
    background:none !important;
  }

  .no-send-popup .mint-radiolist-title{
    margin:12px;
    font-size: 16px;
    color:#333
  }
  .mint-msgbox-input input{
    padding:8px;
  }
  .module-add .mint-radiolist .mint-cell:last-child{
    background:none !important;
  }
  .apply-store-popup{
    width: 100%;
    height: 100%;
  }
  .admin-report-add .item-textarea{
    height:160px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    border: 0;
    outline: 0;
    font-size: 18px;
    padding:6px 16px;
    width: 100%;
  }
  .me-popup{
    width: 100%;
    text-align: center;
  }
  .admin-report-add .action-add-img{
    float: right;
    font-size:20px;
    color: #c34853;
  }

  .admin-report-add .picker-item{
    color:#999
  }
  .admin-report-add .picker-item.picker-selected{
    color:#c34853
  }
  .admin-report-add .mint-radio-input:checked+.mint-radio-core{
    background-color:#c34853;
    border-color:#c34853;
  }
  .module .module-content{
    background: #fff;
    padding:12px 16px;
    font-size: 16px;
  }
  .module .content-left{
    display: inline-block;
    vertical-align: middle;
    width: 24%;
  }
  .module .content-right{
    display: inline-block;
    vertical-align: middle;
    width:70%;
    color: #666;
  }
  .module-add .mint-radiolist .mint-cell{
    display: inline-block;
    width:50%;
  }
  .mint-radiolist-label{
    padding: 0;
  }
  .module-add .mint-radiolist{
    background: #fff;
  }
  .module-add .mint-radiolist-title{
    margin: 0;
  }
  .admin-report-add .module-title{
    background-color:#f5f5f5;

    display: block;
    padding:18px 12px 12px;
    font-size:18px;
  }
  .admin-report-add .module-title:before{
    background:#c34853;
    position: relative;
    top:-2px;
    display:inline-block;
    vertical-align: middle;
    width:2px;
    height:16px;
    content: '';
    margin-right:4px;
  }
  .admin-report-add .button-content{
    padding:32px 24px ;
  }

  .admin-report-add .button-content{
    padding:24px 10px ;
    text-align: center;
  }
  .admin-report-add .button-content .mint-button{
    font-size: 18px;
  }
  .admin-report-add .button-content .mint-button--normal{
    /*display: block;*/
    width:44%;
    margin:0 8px;
  }
  .search-content{
    position: relative;
  }
  .search-list{
    background: #fff;
    position: absolute;
    top:50px;
    left: 96px;
    right: 0;
    font-size: 16px;
    z-index:1000;

  }
  .picker-show-50{
    display: inline-block;
    width:46%;
  }
  .admin-report-add .mint-checkbox-core{
    border-radius:3px
  }
  .admin-report-add .mint-checkbox-input:checked+.mint-checkbox-core{
    background-color: #c34853;
    border-color: #c34853;
  }
</style>
